<template>
  <div class="address-main">
    <el-card shadow="never" class="card">
      <div slot="header">
        <el-button
          type="primary"
          size="small"
          @click="addAddress"
        >新增</el-button>
      </div>
      <el-table v-loading="loading" :data="addressList" border>
        <el-table-column
          fixed="left"
          type="index"
          label="#"
          width="50"
          align="center"
        />
        <el-table-column
          prop="addressName"
          label="地址名称"
          width="200"
          align="center"
        />
        <el-table-column label="默认发货地址" width="200" align="center">
          <template slot-scope="scope">
            默认发货地址:<el-switch
              v-model="scope.row.sendStatus"
              :active-value="1"
              :inactive-value="0"
              @change="switchStatus('sendStatus', scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="收货人姓名"
          width="150"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="收货人电话"
          width="150"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="收货人地址"
          align="center"
        >
          <template slot-scope="scope">
            <p>
              {{ scope.row.province }}
              {{ scope.row.city }}
              {{ scope.row.region }}
            </p>
            <p>
              {{ scope.row.detailAddress }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="默认收货地址" width="200" align="center">
          <template slot-scope="scope">
            默认收货地址:<el-switch
              v-model="scope.row.receiveStatus"
              :active-value="1"
              :inactive-value="0"
              @change="switchStatus('receiveStatus', scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200"
          align="center"
        />
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="goEdit(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="goDelete(scope.row)"
            ><span style="color: red">删除</span></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddressDetail ref="AddressDetail" @success="addSuccess" />
  </div>
</template>

<script>
import addressApi from '@/api/product/address'
import AddressDetail from './detail/index'
export default {
    name: 'AddressList',
    components: {
        AddressDetail
    },
    data() {
        return {
            loading: false,
            addressList: []
        }
    },

    created() {
        this.getAddressList()
    },
    mounted() {},
    methods: {
        addSuccess() {
            this.getAddressList()
        },
        // 修改状态
        switchStatus(statusName, row) {
            var switchApi = statusName === 'receiveStatus' ? 'setReceiveOne' : 'setSendOne'
            // 暂存原来的状态
            var tempStatus = row[statusName] === 0 ? 1 : 0
            var params = {}
            params[statusName] = row[statusName]
            params.id = row.id
            addressApi[switchApi](params).then(res => {
                if (res.success) {
                    this.$message.success('修改状态成功')
                    this.getAddressList()
                } else {
                    // 重置switch 变回原来的状态
                    row[statusName] = tempStatus
                    this.$message.error('修改状态失败')
                }
            })
        },
        // 新增地址
        addAddress() {
            this.$refs.AddressDetail.openAddressDetail()
            // console.log('addaddress')
        },
        // 获取地址列表
        getAddressList() {
            this.loading = true
            addressApi.getAddressList().then((res) => {
                if (res.success) {
                    this.addressList = res.data.items
                } else {
                    this.$message.warning('请求失败')
                }
                this.loading = false
            })
        },
        // 编辑
        goEdit(row) {
            // 路由跳转
            this.$refs.AddressDetail.openAddressDetail(row.id)
        },
        // 删除
        goDelete(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    addressApi
                        .deleteAddress(row.id)
                        .then((res) => {
                            if (res.success) {
                                this.getAddressList()
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                })
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                        .catch((res) => {
                            this.$message.error(res.message)
                        })
                })
                .catch((rej) => {
                    console.log(rej)
                })
        }
    }
}
</script>

<style scoped lang="scss">
.address-main {
  .card {
    margin: 30px;
  }
}
</style>
